<template>
  <div class="preview">
    <iframe class="game" :src="url">

    </iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRaw, onMounted, onUnmounted } from 'vue';
import { Emitter } from '@/ui-kit/index';
import { Msg } from './msg';

export default defineComponent({
  name: 'preview',
  props: {},
  setup(props, { emit }) {
    onMounted(() => {

    });
    onUnmounted(() => {
      Emitter.emit(Msg.ClosePreview);
    });
    let { protocol, hostname, pathname, port } = window.location;
    if (pathname.endsWith('.html')) {
      const arr = pathname.split('/');
      arr.pop();
      pathname = arr.join('/').toString();
    }

    let gamePreviewUrl = '';
    let urlHead = `${protocol}//${hostname}`;
    if (port.length) {
      urlHead += `:${port}`;
    }

    if (pathname.length) {
      gamePreviewUrl = `${urlHead}/${pathname}/cocos.html`;
    } else {
      gamePreviewUrl = `${urlHead}/cocos.html`;
    }
    console.log('url:', gamePreviewUrl);
    const url = ref(gamePreviewUrl);
    return {
      url,
    };
  },
});

</script>

<style scoped lang="scss">
.preview {
  .game {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
  }
}
</style>